<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom</title>
	</head>
	<body>
		<div style="color: red;">
			I am Zhang San
		</div>
		<div id="lisi">
			He is Li Si
		</div>
		<div class="wangwu">
			She is Wang Wu
		</div>
		<input type="button" value="变绿" onclick="green()" />
		<input type="button" value="变红" onclick="red()" />
		<input type="button" value="变蓝" onclick="blue()" />
		<input type="button" value="去除颜色" onclick="removeColor()" />
		<input type="text" name="" id="username" value="" />
		<input type="button" value="获取用户名" onclick="getValue()" />
	</body>
	<script type="text/javascript">
		//console.dir(document.documentElement.innerText)
		//childNodes		获取子节点	数组
		//parentNode		获取父节点	单个
		//firstChild		获取第一个子节点
		//lastChild			获取最后一个子节点
		//nextSibling		获取下一个
		//previousSibling	获取上一个兄弟节点
		let mySpan = document.documentElement.childNodes[2].childNodes[1]
		let myBody = mySpan.parentNode
		let zhangsan= document.documentElement.childNodes[2].childNodes[1]
		//etElementById('lisi')返回对象
		let lisi = document.getElementById('lisi')
		//getElementsByClassName('wangwu')返回列表
		let wangwu = document.getElementsByClassName('wangwu')
		//getElementsByTagName()返回对象，通过标签名
		let zs = document.getElementsByTagName('div')
//		console.dir(document.documentElement.childNodes[2].childNodes)
//		for (i in document.documentElement.childNodes[2].childNodes)
//		{
//			if(!isNaN(i))
//				console.dir(document.documentElement.childNodes[2].childNodes[i])
//		}
		//getAttribute 获取对象属性值
		
		//setArribute('name','value')设置对象属性值
		
		//removeAttribute('style')移除对象属性值
		function green(){
			zhangsan.setAttribute("style","color:green")
			wangwu.style.color = 'green'
			zhangsan.style.fontSize = '50px'
		}
		function red(){
			zhangsan.setAttribute("style","color:red")
			lisi.style.color = 'red'
		}
		function removeColor(){
			zhangsan.removeAttribute('style')
			wangwu.style.display = 'none'
		}
		function blue(){
			console.dir(zs)
		}
		function getValue(){
			let oInput = document.getElementById('username')
			alert(oInput.value)
		}
	</script>
</html>
